<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的爱车</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/sm.css">
    <link rel="stylesheet" href="css/sm-extend.css">
</head>

<body>
    <div class="page-group">
        <div class="page" id="device-list">
            <header class="bar bar-nav">
                <a class="icon icon-code pull-right" href="#device-add"></a>
                <h1 class="title">设备列表</h1>
            </header>
            <div class="list-block media-list">
                <ul>
                    <li>
                        <a href="#device-info" class="item-link item-content">
                            <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 4rem;'></div>
                            <div class="item-inner">
                                <div class="item-title-row">
                                    <div class="item-title">我的小毛驴</div>
                                    <div class="item-after">在线</div>
                                </div>
                                <div class="item-subtitle">当前环境</div>
                                <div class="item-text">PM超标、甲醛超标</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="list-block media-list">
                <ul>
                    <li>
                        <a href="#device-info" class="item-link item-content">
                            <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 4rem;'></div>
                            <div class="item-inner">
                                <div class="item-title-row">
                                    <div class="item-title">我的小毛驴</div>
                                    <div class="item-after">在线</div>
                                </div>
                                <div class="item-subtitle">当前环境</div>
                                <div class="item-text">PM超标、甲醛超标</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="list-block media-list">
                <ul>
                    <li>
                        <a href="#device-info" class="item-link item-content">
                            <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 4rem;'></div>
                            <div class="item-inner">
                                <div class="item-title-row">
                                    <div class="item-title">我的小毛驴</div>
                                    <div class="item-after">在线</div>
                                </div>
                                <div class="item-subtitle">当前环境</div>
                                <div class="item-text">PM超标、甲醛超标</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <nav class="bar bar-tab">
                <a class="tab-item external active" href="#" menu-data="device-list">
                    <span class="icon icon-home"></span>
                    <span class="tab-label">设备列表</span>
                </a>
                <a class="tab-item external" href="#" menu-data="device-his">
                    <span class="icon icon-me"></span>
                    <span class="tab-label">历史记录</span>
                    <span class="badge">2</span>
                </a>
                <a class="tab-item external" href="#" menu-data="device-set">
                    <span class="icon icon-star"></span>
                    <span class="tab-label">常用设置</span>
                </a>
            </nav>
        </div>
        <div class="page" id="device-info">
            <header class="bar bar-nav">
                <a class="icon icon-left pull-left pull-left back" href="#device-list"></a>
                <h1 class="title">我的小毛驴</h1>
            </header>

            <div class="d-info">
                
            </div>

            <nav class="bar bar-tab">
                <a class="tab-item external active" href="#" menu-data="device-list">
                    <span class="icon icon-home"></span>
                    <span class="tab-label">设备列表</span>
                </a>
                <a class="tab-item external" href="#" menu-data="device-his">
                    <span class="icon icon-me"></span>
                    <span class="tab-label">历史记录</span>
                    <span class="badge">2</span>
                </a>
                <a class="tab-item external" href="#" menu-data="device-set">
                    <span class="icon icon-star"></span>
                    <span class="tab-label">常用设置</span>
                </a>
            </nav>
        </div>
        <div class="page" id="device-his">
            <header class="bar bar-nav">
                <h1 class="title">历史记录</h1>
            </header>
            <nav class="bar bar-tab">
                <a class="tab-item external " href="#" menu-data="device-list">
                    <span class="icon icon-home"></span>
                    <span class="tab-label">设备列表</span>
                </a>
                <a class="tab-item external active" href="#" menu-data="device-his">
                    <span class="icon icon-me"></span>
                    <span class="tab-label">历史记录</span>
                    <span class="badge">2</span>
                </a>
                <a class="tab-item external" href="#" menu-data="device-set">
                    <span class="icon icon-star"></span>
                    <span class="tab-label">常用设置</span>
                </a>
            </nav>
        </div>
        <div class="page" id="device-add">
            <header class="bar bar-nav">
                <a class="icon icon-left pull-left pull-left back" href="#device-list"></a>
                <h1 class="title">设备新增</h1>
            </header>
            div class="content">
            <div class="list-block">
                <ul>
                    <!-- Text inputs -->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">设备名称</div>
                                <div class="item-input">
                                    <input type="text" placeholder="设备名称">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-email"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">设备UID</div>
                                <div class="item-input">
                                    <input type="text" placeholder="设备UID">
                                </div>
                            </div>
                        </div>
                    </li>                  
                </ul>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-50"><a href="#device-list" class="button button-big button-fill button-danger">取消</a></div>
                    <div class="col-50"><a href="#device-list" class="button button-big button-fill button-success">提交</a></div>
                </div>
            </div>
        </div>
    </div>
    <div class="page" id="device-set">
        <header class="bar bar-nav">
            <h1 class="title">常用设置</h1>
        </header>
        <nav class="bar bar-tab">
            <a class="tab-item external " href="#" menu-data="device-list">
                <span class="icon icon-home"></span>
                <span class="tab-label">设备列表</span>
            </a>
            <a class="tab-item external" href="#" menu-data="device-his">
                <span class="icon icon-me"></span>
                <span class="tab-label">历史记录</span>
                <span class="badge">2</span>
            </a>
            <a class="tab-item external active" href="#" menu-data="device-set">
                <span class="icon icon-star"></span>
                <span class="tab-label">常用设置</span>
            </a>
        </nav>
    </div>
    <script type='text/javascript' src='js/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='js/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>
